<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ page trimDirectiveWhitespaces="true"%>
<%@ page isELIgnored="false"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="ujn" uri="http://ujn.edu.cn/common/"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>订单管理</title>
<!-- 引入css样式文件 -->
<!-- Bootstrap Core CSS -->
<link href="<%=basePath%>css/bootstrap.min.css" rel="stylesheet" />
<!-- MetisMenu CSS -->
<link href="<%=basePath%>css/metisMenu.min.css" rel="stylesheet" />
<!-- DataTables CSS -->
<link href="<%=basePath%>css/dataTables.bootstrap.css" rel="stylesheet" />
<!-- Custom CSS -->
<link href="<%=basePath%>css/sb-admin-2.css" rel="stylesheet" />
<!-- Custom Fonts -->
<link href="<%=basePath%>css/font-awesome.min.css" rel="stylesheet"
	type="text/css" />
<link href="<%=basePath%>css/boot-crm.css" rel="stylesheet"
	type="text/css" />
<link href="<%=basePath%>css/bootstrap-datetimepicker.css"
	type="text/css">
</head>
<body>
	<div id="wrapper">
		<jsp:include page="menu.jsp" />
		<!-- 订单列表查询部分  start-->
		<div id="page-wrapper">
			<div class="row">
				<div class="col-lg-12">
					<h1 class="page-header">订单管理</h1>
				</div>
				<!-- /.col-lg-12 -->
			</div>
			<!-- /.row -->
			<div class="panel panel-default">
				<div class="panel-body">
					<form class="form-inline" method="get"
						action="${pageContext.request.contextPath }/orders/list.action">
						<div class="form-group">
							<label for="custName">客户名称</label> <input type="text"
								class="form-control" id="custName" value="${custName }"
								name="custName" />
						</div>
						<div class="form-group">
							<label for="prodName">商品名称</label> <input type="text"
								class="form-control" id="prodName" value="${prodName }"
								name="prodName" />
						</div>


						<div class="form-group">
							<label for="shopState">订单状态</label> <select class="form-control"
								id="shopState" name="shopState">
								<option value="">--请选择--</option>


								<option value="0"
									<c:if test="${shopState.equals('0')}"> selected</c:if>>
									失效</option>
								<option value="1"
									<c:if test="${shopState.equals('1')}"> selected</c:if>>
									有效</option>

							</select>
						</div>


						<button type="submit" class="btn btn-primary">查询</button>
					</form>
				</div>
			</div>
			<a href="#" class="btn btn-primary" data-toggle="modal"
				data-target="#newOrdersDialog" onclick="clearOrder()">新建</a>
			<div class="row">
				<div class="col-lg-12">
					<div class="panel panel-default">
						<div class="panel-heading">订单信息列表</div>
						<!-- /.panel-heading -->
						<table class="table table-bordered table-striped">
							<thead>
								<tr>
									<th>订单id</th>
									<th>客户名称</th>
									<th>商品名称</th>
									<th>商品数目</th>
									<th>订单状态</th>
									<th>操作</th>
								</tr>
							</thead>
							<tbody>

								<c:forEach items="${page.rows}" var="row">
									<tr>
										<td>${row.ordersId}</td>
										<td>${row.custName}</td>
										<td>${row.prodName}</td>
										<td>${row.nums}</td>
										<td>${row.shopState == 1 ? "有效":"失效"}</td>

										<td><a href="#" class="btn btn-primary btn-xs"
											data-toggle="modal" data-target="#orderEditDialog"
											onclick="editOrder(${row.ordersId})">修改</a> <a href="#"
											class="btn btn-danger btn-xs"
											onclick="deleteOrder(${row.ordersId})">删除</a></td>
									</tr>
								</c:forEach>
							</tbody>
						</table>
						<div class="col-md-12 text-right">
							<ujn:page
								url="${pageContext.request.contextPath }/user/list.action" />
						</div>
						<!-- /.panel-body -->
					</div>
					<!-- /.panel -->
				</div>
				<!-- /.col-lg-12 -->
			</div>
		</div>
		<!-- 客户列表查询部分  end-->
	</div>
	<!-- 创建订单模态框 -->
	<div class="modal fade" id="newOrdersDialog" tabindex="-1"
		role="dialog" aria-labelledby="myModalLabel">
		<div class="modal-dialog" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-label="Close">
						<span aria-hidden="true">&times;</span>
					</button>
					<h4 class="modal-title" id="myModalLabel">新建订单信息</h4>
				</div>
				<form class="form-horizontal" id="new_order_form">
					<div class="modal-body">
						<div class="form-group">
							<label for="new_custName" class="col-sm-2 control-label">
								客户名称 </label>
							<div class="col-sm-10">
								<input type="text" class="form-control" id="new_custName"
									placeholder="客户名称" name="custName" />
							</div>
						</div>
						<div class="form-group">
							<label for="new_prodName" class="col-sm-2 control-label">
								商品名称 </label>
							<div class="col-sm-10">
								<input type="text" class="form-control" id="new_prodName"
									placeholder="商品名称" name="prodName" />
							</div>
						</div>

						<div class="form-group">
							<label for="new_nums" class="col-sm-2 control-label">
								商品数量 </label>
							<div class="col-sm-10">
								<input type="number" class="form-control" id="new_nums"
									placeholder="商品数量" name="nums" />
							</div>
						</div>

						<div class="form-group">
							<label for="new_shopState"
								style="float: left; padding: 7px 15px 0 27px;">商品状态</label>
							<div class="col-sm-10">
								<select class="form-control" id="new_shopState" name="shopState">
									<option value="">--请选择--</option>
									<option value="1">有效</option>
									<option value="0">失效</option>
								</select>
							</div>
						</div>
					</div>
				</form>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
				<button type="button" class="btn btn-primary"
					onclick="createOrders()">创建订单</button>
			</div>
		</div>
	</div>
<!-- 修改订单模态框 -->
<div class="modal fade" id="orderEditDialog" tabindex="-1" role="dialog"
     aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="myModalLabel">修改订单信息</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" id="edit_order_form">
                    <input type="hidden" id="edit_OrdersId" name="ordersId"/>

                    <div class="form-group">
                        <label for="edit_custName" class="col-sm-2 control-label">客户名称</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="edit_custName" placeholder="客户名称"
                                   name="custName"/>
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="edit_prodName" class="col-sm-2 control-label">商品名称</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="edit_prodName" placeholder="商品名称"
                                   name="prodName"/>
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="edit_nums" class="col-sm-2 control-label">商品数量</label>
                        <div class="col-sm-10">
                            <input type="number" class="form-control" id="edit_nums" placeholder="商品数量"
                                   name="nums"/>
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="edit_shopState" style="float:left;padding:7px 15px 0 27px;">订单状态</label>
                        <div class="col-sm-10">
                            <select class="form-control" id="edit_shopState" name="shopState">
                                <option value="">--请选择--</option>

                                <option value="0">
                                    失效
                                </option>
                                <option value="1">
                                    有效
                                </option>
                            </select>
                        </div>
                    </div>


                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" onclick="updateOrders()">保存修改</button>
            </div>
        </div>
    </div>
</div>
	<!-- 引入js文件 -->
	<!-- jQuery -->
	<script src="<%=basePath%>js/jquery-1.11.3.min.js"></script>
	<!-- Bootstrap Core JavaScript -->
	<script src="<%=basePath%>js/bootstrap.min.js"></script>
	<!-- Metis Menu Plugin JavaScript -->
	<script src="<%=basePath%>js/metisMenu.min.js"></script>
	<!-- DataTables JavaScript -->
	<script src="<%=basePath%>js/jquery.dataTables.min.js"></script>
	<script src="<%=basePath%>js/dataTables.bootstrap.min.js"></script>
	<!-- Custom Theme JavaScript -->
	<script src="<%=basePath%>js/sb-admin-2.js"></script>
	<script src="<%=basePath%>js/moment.min.js"></script>
	<script src="<%=basePath%>js/bootstrap-datetimepicker.min.js"></script>

	<!-- 编写js代码 -->
	<script type="text/javascript">
    
    //清空新建订单窗口中的数据
    function clearOrder() {
        $("#new_custName").val("");
        $("#new_prodName").val("")
        $("#new_nums").val("")
        $("#new_createTime").val("");
        $("#new_shopState").val("");
    }

    // 创建
    function createOrders() {
        $.post("<%=basePath%>orders/create.action",
            $("#new_order_form").serialize(), function (data) {
                if (data == "OK") {
                    alert("订单创建成功！");
                    window.location.reload();
                } else {
                    alert("请输入正确的客户姓名或商品名称");
                    window.location.reload();
                }
            });
    }
    
    // 通过id获取修改的信息
    function editOrder(id) {
        $.ajax({
            type: "get",
            url: "<%=basePath%>orders/getOrdersById.action",
            data: {"id": id},
            success: function (data) {
                $("#edit_OrdersId").val(data.ordersId);
                $("#edit_custName").val(data.custName);
                $("#edit_prodName").val(data.prodName)
                $("#edit_nums").val(data.nums)
                $("#edit_createTime").val(data.createTime)
                $("#edit_shopState").val(data.shopState)
            }
        });
    }

    // 执行修改操作
    function updateOrders() {
        $.post("<%=basePath%>orders/update.action", $("#edit_order_form").serialize(), function (data) {
            if (data == "OK") {
                alert("订单信息更新成功！");
                window.location.reload();
            } else {
                alert("请输入正确的客户姓名或商品名称");
                window.location.reload();
            }
        });
    }
    
    // 删除
    function deleteOrder(id) {
        if (confirm('确实要删除该订单吗?')) {
            $.post("<%=basePath%>orders/delete.action", {"id": id},
                function (data) {
                    if (data == "OK") {
                        alert("订单删除成功！");
                        window.location.reload();
                    } else {
                        alert("删除订单失败！");
                        window.location.reload();
                    }
                });
        }
    }

</script>
</body>
</html>